<template>
  <div v-if="detail.basicInfo">
   <common-head title="商品详情" />
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="pic in detail.pics" :key="pic.id">
        <img class="banner" :src="pic.pic" alt />
      </van-swipe-item>
    </van-swipe>
    <h3 class="detail-desc">{{detail.basicInfo.name}}</h3>
    <div class="good-price">
      <span class="now-price">￥{{detail.basicInfo.minPrice}}</span>
      <span class="pre-price">￥{{detail.basicInfo.originalPrice }}</span>
    </div>
    <div class="content" v-html="content"></div>
    <!-- sku商品规格 -->
    <van-popup v-model="skuShow" position="bottom" :style="{ height: '40%' }">
      <van-card
        :num="sku.num"
        :price="sku.minPrice"
        :title="sku.name"
        :thumb="sku.pic"
      >
        <template #footer>
          <van-button size="small"  plain type="default" @click='addNum'>+</van-button>
          <span>{{sku.num}}</span>
          <van-button size="small" plain type="default" @click="reduceNum">-</van-button>
        </template>
      </van-card>
      <van-button style="background:#f56456 " @click="act"  size="large" id="confirm">确认</van-button>
    </van-popup>

    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" @click="$router.push('/home')" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cart.lists.length?cart.lists.length:''"  @click="$router.push('/cart')"/>
      <van-goods-action-button type="warning" text="加入购物车" @click='showPopCart' />
      <van-goods-action-button type="danger" text="立即购买" @click="showPopBuyNow" />
    </van-goods-action>
  </div>
</template>

<script>
import { fetchItemById } from '@api'
import addCart from '../../mixins/addCart'
import { mapState } from 'vuex'
import CommonHead from '@/components/CommonHead'

// 这里的addCart只是一个名字
export default {
  data () {
    return {
      detail: {},
      skuShow: false,
      sku: {
      },
      btn: 0
    }
  },
  created () {
    this.fetchItem()
  },
  mixins: [addCart],
  methods: {
    act () {
      if (this.btn) {
        // if(0)是false
        alert('立即购买')
      } else {
        // 加入购物车cart
        this.add_cart(this.sku)
        this.skuShow = false
      }
    },
    // 增加按钮
    addNum () {
      this.sku.num++
    },
    // 减少按钮
    reduceNum () {
      this.sku.num--
      if (this.sku.num <= 1) {
        this.sku.num = 1
      }
    },
    showPopCart () {
      this.skuShow = true
      this.btn = 0
    },
    showPopBuyNow () {
      this.skuShow = true
      this.btn = 1
    },
    fetchItem () {
      fetchItemById(this.$route.params.cateId).then((res) => {
        if (res.data.code === 0) {
          this.detail = res.data.data
          // console.log(this.detail)
          this.sku = {
            ...this.detail.basicInfo,
            num: 1,
            isChecked: true
          }
          // console.log(this.sku)
        }
      })
    }
  },
  computed: {
    content () {
      return this.detail.content.replace(
        /<img/g,
        "<img style='vertical-align:bottom;width:100%'"
      )
    },
    ...mapState(['cart'])
  },
  components: {
    CommonHead
  }
  
}
</script>

<style lang="scss" scoped>

.my-swipe {
  img {
    width: 100%;
  }
}
.detail-desc {
  font-size: 15.4px;
  color: #353535;
  font-weight: normal;
}
.good-price {
  // padding: 0 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
  .now-price {
    font-size: 16px;
    color: #f56456;
  }
  .pre-price {
    font-size: 10px;
    color: #999;
    text-decoration: line-through;
    margin-left: 10px;
  }
}
#confirm{
  border-radius: 25px;
  color: #ffffff;
}
</style>
